<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #lll{
            border: 2px solid red;
            border-radius: 20px;
            width: 200px;
            height: 410px;  
            margin: 0 auto;
        }
        /* 外层框架 */
        .ook{
            border: 1px solid transparent;
            width: 200px;
            height: 400px;
            margin: 0 auto;
        }
        /* 内层覆盖框架 */
        div p a:link{
            text-decoration: none;
            font-size: 12px;
        }
        /* 去除超链接下划线 */
        .xz:hover{
            background-color: #49aaee;
            text-decoration: none;
        }
        /* 隐藏的背景颜色悬浮触发 */
        .xz a:hover{
            text-decoration: underline;
            color: white;
        }
        /* 悬浮显示下划线 */
        .xing{
            margin-top: 4px;
            float: left;
            width: 20px;
        }
        .xing2{
            display: none;
        }
        .xxe:hover .xing2{
            display: inline;
            margin-top: 4px;
            float: left;
            width: 20px;
        }
        /* 隐藏的图片宽和高 */
        .xxe:hover .xing{
            display: none;
        }
        /* 一小块的伪类悬浮图标内容 */
        .xxa:hover .ling{
            display: none;
        }
        .xxa:hover .ling2{
            margin-top: 4px;
            float: left;
            display: inline;
            width: 20px;
        }
        .ling{
            margin-top: 4px;
            float: left;
            width: 20px;
        }
        .ling2{
            display: none;
        }
        /* 一小块的伪类悬浮图标内容 */
        .az:hover .xia{
            display: none;
        }
        .az:hover .xia2{
            margin-top: 4px;
            float: left;
            /* float悬浮 */
            display: inline;
            width: 20px;
        }
        .xia{
            margin-top: 4px;
            float: left;
            width: 20px;
        }
        .xia2{
            display: none;
        }
        /* 一小块的伪类悬浮图标内容 */
        span{
            font-size: 12px;
            color: lightcoral;
        }
    </style>
</head>
<body>
<div id="lll">
    <div class="ook">
        <span>贴吧分类 ——————————</span>
        <div class="xxe">
        <div class="xz">
        <p>
            <img src="./star.png" class="xing">
            <img src="./star2.png" class="xing2">
            <a href="#">娱乐明星</a>
        </p>
        <!-- 主导超链接 -->
        <p class="lss">
            <a href="#">cp</a>&nbsp;<a href="#">娱乐明星话题</a>&nbsp;
            <a href="#">导演</a>&nbsp;<a href="#">时尚人物</a>
        </p>
        <p class="lss">
            <a href="#">明星</a>&nbsp;<a href="#">粉丝组织</a>&nbsp;
            <a href="#">网络红人</a>
        </p><hr>
        </div>
        </div>
        <!-- 第一部分 -->
        <div class="az">
        <div class="xz">
        <p>
            <img src="./xiaoren.png" class="xia">
            <img src="./xiao.png" class="xia2">
            <a href="#">体育</a>
        </p>
        <p class="lss">
            <a href="#">足球</a>&nbsp;<a href="#">篮球</a>&nbsp;
            <a href="#">NBA</a>&nbsp;<a href="#">CBA</a>&nbsp;
            <a href="#">乒乓球</a>
        </p>
        <p class="lss">
            <a href="#">网球</a>&nbsp;<a href="#">舞蹈</a>&nbsp;
            <a href="#">健身</a>
        </p><hr>
        </div>
        </div>
        <!-- 第二部分 -->
        <div class="xxa">
        <div class="xz">
        <p>
            <img src="./shu.png" class="ling">
            <img src="shu2.png" class="ling2">
            <a href="#">小说</a>
        </p>
        <p class="lss">
            <a href="#">奇幻</a>&nbsp;<a href="#">言情</a>&nbsp;
            <a href="#">灵异</a>&nbsp;<a href="#">穿越</a>&nbsp;
            <a href="#">连载</a>&nbsp;<a href="#">修真</a>&nbsp;
        </p>
        <p class="lss">
            <a href="#">历史</a>&nbsp;<a href="#">架空文</a>&nbsp;
        </p>
        </div>
        <!-- 第三部分 -->
        </div>
</div>
</body>
</html>